<!-- 基础设置 -> 账套设置 -> 会计期间 -->
<template>
    <div class="set-wrapper">
        <a-row>
            <a-col span="11">
                <a-form-item :labelCol="formItemLayout.labelCol" :wrapperCol="formItemLayout.wrapperCol" label="启用年度">
                    <a-input disabled :value="currentAccount.accountYear || ''" placeholder="请选择年度"></a-input>
                </a-form-item>
            </a-col>
            <a-col span="2"></a-col>
            <a-col span="11">
                <a-form-item :labelCol="formItemLayout.labelCol" :wrapperCol="formItemLayout.wrapperCol" label="期间个数">
                    <a-input disabled :value="12" placeholder="请选择期间个数"></a-input>
                </a-form-item>
            </a-col>
            <a-col span="11">
                <a-form-item :labelCol="formItemLayout.labelCol" :wrapperCol="formItemLayout.wrapperCol" label="年度开始日期">
                    <!-- <a-input placeholder="请选择年度"></a-input> -->
                    <a-date-picker disabled style="width:100%" :value="currentAccount.beginDate || ''" format="YYYY-MM-DD" placeholder="选择日期" />
                </a-form-item>
            </a-col>
            <a-col span="2"></a-col>
            <a-col span="11">
                <a-form-item :labelCol="formItemLayout.labelCol" :wrapperCol="formItemLayout.wrapperCol" label="年度截止日期">
                    <!-- <a-input placeholder="请选择期间个数"></a-input> -->
                    <a-date-picker disabled style="width:100%" :value="currentAccount.endDate || ''" format="YYYY-MM-DD" placeholder="选择日期" />
                </a-form-item>
            </a-col>
            <a-col span="11" v-if="currentAccount.isFirstYear && currentAccount.status == 0">
                <a-form-item :labelCol="formItemLayout.labelCol" :wrapperCol="formItemLayout.wrapperCol" label="首年启用期间">
                    <a-select @change="changeEnableDuration" :value="currentAccount.enableDuration || 1" style="width:100%">
                        <a-select-option v-for="(item, index) in DurationList" :key="index" :value="item">{{ item }}
                        </a-select-option>
                    </a-select>
                </a-form-item>
            </a-col>
        </a-row>

        <a-table style="width:400px" class="a-base-table border-none" :columns="columns" :data-source="currentAccounting" :pagination="false" bordered>
            <template slot="currentPeriod" slot-scope="text,record,index">
                <div :style="record.currentPeriod < currentAccount.enableDuration ? 'color:#ccc' : ''">{{text}}月</div>
            </template>
            <template slot="beginDate" slot-scope="text,record,index">
                <!-- <div v-if="currentAccount.enableDuration < (index+2) && index != 11">{{text}}</div> -->
                <!-- <div v-else style="color:#ccc">{{text}}</div> -->
                <div :style="record.currentPeriod < currentAccount.enableDuration ? 'color:#ccc' : ''">{{text}}</div>
            </template>
            <template slot="endDate" slot-scope="row, list, index">
                <a-date-picker v-if="disabledPick(row)" class="w100 picker-input" :allowClear="false" :value="row.endDate" @change="(m, v) => dateChange(row, m, v, index)" :disabled-date="date => disabledDate(date, index)" />
                <span v-else style="color:#ccc">{{ row.endDate }} </span>
            </template>
        </a-table>
    </div>
</template>
<script>
import { postAction } from "@/api/manage";
import { save as savePeriod } from "@/api/erp/period";

export default {
    props: {

    },
    data () {
        const currentMonthStartDay = moment().startOf("month");
        const yearStartDay = moment()
            .month(0)
            .startOf("month");
        const yearEndDay = moment()
            .month(11)
            .endOf("month");
        return {
            currentAccount: {},
            currentAccounting: [], //当前会计期间
            formItemLayout: {
                labelCol: { span: 8 },
                wrapperCol: { span: 16 }
            },
            endDate: "",
            title: "",
            isFirstYear: true,
            yearStartDay,
            yearEndDay,
            currentMonthStartDay, //当前月份的第一天
            columns: [
                {
                    title: "期间",
                    width: 40,
                    dataIndex: "currentPeriod",
                    align: 'center',
                    scopedSlots: { customRender: "currentPeriod" }
                },
                {
                    title: "起始日期",
                    width: 100,
                    align: 'center',
                    dataIndex: "beginDate",
                    scopedSlots: { customRender: "beginDate" }
                },
                {
                    title: "结束日期",
                    width: 100,
                    align: 'center',
                    scopedSlots: { customRender: "endDate" }
                }
            ],
            DurationList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
            enableDuration: moment().month() + 1 //启用期间（首次才可以编辑）
        };
    },
    computed: {},
    methods: {
        onDateChange (value, dateString) {
            console.log(dateString);
        },
        dateChange (row, m, lastMonthEndDateStr, index) {
            row.endDate = m.format("YYYY-MM-DD");
            this.dateChangeLoop(m, lastMonthEndDateStr, index);
        },
        dateChangeLoop (m, lastMonthEndDateStr, index) {
            const { accountYear } = this.currentAccount;
            if (index > 10) return false;
            let nextDate = this.currentAccounting[index + 1];
            console.log("nextDate:", nextDate);
            if (nextDate) {
                nextDate.beginDate = moment(lastMonthEndDateStr)
                    .add(1, "days")
                    .format("YYYY-MM-DD");
                if (index < 10) {
                    let date = m.date();
                    let endDate = moment(nextDate.endDate).date(date);
                    let endOfMonth = moment()
                        .year(accountYear)
                        .month(nextDate.currentPeriod - 1)
                        .endOf("month");
                    console.log(
                        endDate.format("YYYY-MM-DD"),
                        endOfMonth.format("YYYY-MM-DD")
                    );
                    if (endDate > endOfMonth) {
                        endDate = endOfMonth;
                    }
                    nextDate.endDate = endDate.format("YYYY-MM-DD");
                    console.log("dateChange:", nextDate);
                    this.dateChangeLoop(m, endDate, index + 1);
                }
            }
        },
        //更改
        changeEnableDuration (value) {
            this.currentAccount.enableDuration = value;
        },
        disabledPick (row) {
            const { currentMonthStartDay } = this;
            const { enableDuration, isFirstYear } = this.currentAccount;
            let a = row.currentPeriod == 12; //是否 是12月
            let b = currentMonthStartDay > moment(row.endDate);
            let c = isFirstYear ? enableDuration > row.currentPeriod : b;
            return !(a || c);
        },
        disabledDate (current, i = 0) {
            const { accountYear } = this.currentAccount;
            let a1 = moment()
                .year(accountYear)
                .month(i)
                .date(19);
            let b1 = moment()
                .year(accountYear)
                .month(i)
                .endOf("month");
            let a = current < a1;
            let b = current > b1;
            return a || b;
        },
        handleSubmit () {
            this.form.validateFieldsAndScroll((err, values) => {
                console.log();
                if (!err) {
                    const { id, enableDuration } = this.currentAccount;
                    let postData = {
                        erpPeriodDtos: this.currentAccounting,
                        accountId: id
                    };
                    if (this.currentAccount.isFirstYear && this.currentAccount.status == 0) {
                        postData.enableDuration = enableDuration;
                    } else {
                        delete postData.enableDuration;
                    }
                    savePeriod(postData).then(res => {
                        if (res.code == 200) {
                            this.$message.success("保存成功");
                            this.$emit("accountingSetok", 4);
                        } else {
                            // this.$message.warning(res.message);
                        }
                    });
                }
            });
        },
        add () {
            console.log("acountingSet_add_currentAccount:", this.currentAccount)
            let { enableDuration } = this;
            let { accountYear } = this.currentAccount;
            let data = {
                beginDate: moment().year(accountYear)
                    .month(0)
                    .startOf("month")
                    .format("YYYY-MM-DD"), //期间 开始日期
                endDate: moment()
                    .year(accountYear)
                    .month(11)
                    .endOf("month")
                    .format("YYYY-MM-DD"), //期间 结束日期
                enableDuration: enableDuration
            }
            Object.assign(this.currentAccount, { ...data });
            let PeriodList = [];
            for (let i = 0; i < 12; i++) {
                PeriodList.push({
                    currentPeriod: i + 1, //会计期间-月份
                    beginDate: moment()
                        .year(accountYear)
                        .month(i)
                        .startOf("month")
                        .format("YYYY-MM-DD"), //期间 开始日期
                    endDate: moment()
                        .year(accountYear)
                        .month(i)
                        .endOf("month")
                        .format("YYYY-MM-DD"), //期间 结束日期
                    currentYear: accountYear //会计期间-年份
                });
            }

            this.currentAccounting = PeriodList;
        },
        edit () {
            const { currentAccount } = this;
            if (!currentAccount.enableDuration) {
                console.log("当前账套没有启用期间：", currentAccount.enableDuration);
                this.add();
            } else {
                console.log("使用编辑");
                this.currentAccounting = currentAccount.erpPeriodList || {};
            }

        }
    },
    beforeCreate () {
        this.form = this.$form.createForm(this, { name: "DataSourceEditForm" });
    }
};
</script>
<style lang="less">
    .picker-input {
        .a-input {
            text-align: center !important;
        }
    }
</style>